<template>
    <el-drawer
        v-model="messageDrawer"
        :modal="modal"
        :direction="direction"
        :size="getSize"
        :showClose="showClose"
        :before-close="handleClose"
        :modal-class="getModalClass"
        class="custom-message-drawer"
    >
        <template #header>
            <div class="drawer-title">
                <svg class="back" v-if="isHistoryMessage" @click="backMessage">
                    <use xlink:href="#keowledge-fanhuishangyiji"></use>
                </svg>
                <span>{{!isHistoryMessage?$t('message.text.messaegNotifi'):$t('message.text.historyNews')}}</span>
            </div>
            <svg class="drawer-close" v-if="!showClose" @click="handleClose">
                <use xlink:href="#keowledge-danchuangguanbi1"></use>
            </svg>
       </template>
       <div class="message-header-box">
            <div class="left">
                <el-badge is-dot class="item" :hidden="isHiddenDot">
                    <div class="notice">{{$t('message.text.notice')}}</div>
                </el-badge>
            </div>
            <div class="right">
                <el-button type="text" @click="readAllMessage">{{$t('message.text.allRead')}}</el-button>
                <div class="line"></div>
                <el-tooltip :content="$t('message.text.historyNews')" class="his-button" effect="light">
                    <svg class="history-icon" @click="toHistroy()">
                        <use xlink:href="#keowledge-lishijilu"></use>
                    </svg>
                </el-tooltip>
            </div>
       </div>
       <div class="message-body" :style="{height:(messagePage.total>messagePage.size&&isHistoryMessage)?'calc(100% - 100px)':''}" v-loading="messageLoading">
            <el-scrollbar v-if="insideList.length!=0">
                <div class="message-item" v-for="(item,index) in insideList" :key="index">
                    <div class="create-time">{{item.createTime}}</div>
                    <div class="message-item-body">
                        <div class="icon-box">
                            <svg class="message-cion">
                                <use v-bind:xlink:href="`#${item.readIs?'keowledge-tongzhi-yidu':'keowledge-tongzhi'}`"></use>
                            </svg>
                        </div>
                        <div class="message-item-content">
                            <div class="message-title" v-tooltip-auto-show @click="oepnMessage(item)">
                                <el-tooltip :content="item.msgContent.title" effect="light">
                                    <span>{{item.msgContent.title}}</span>
                                </el-tooltip>
                            </div>
                            <div class="cell-message" v-if="item.isOpen" @click="closeMessage(item)">{{$t('message.text.putAway')}}
                                <svg class="icon">
                                    <use xlink:href="#keowledge-danchuang-zhankai"></use>
                                </svg>
                            </div>
                            <div class="message-content" v-html="item.msgContent.content||$t('message.text.noMessageContent')" :class="[!item.isOpen && 'cell']"></div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
            <jvs-empty v-if="insideList.length==0"></jvs-empty>
       </div>
       <div class="page" v-if="messagePage.total>messagePage.size&&isHistoryMessage">
            <svg class="icon" @click="cutPage()">
                <use xlink:href="#keowledge-a-zu4701-copy"></use>
            </svg>
            <el-input-number v-model="messagePage.current" :min="1" :max="Math.ceil(messagePage.total/messagePage.size)" 
                controls-position="right" @blur="numberBlur()" @keyup.enter="numberBlur()"></el-input-number>
            <span class="split">/</span>
            <span>{{Math.ceil(messagePage.total/messagePage.size)}}</span>
            <svg class="icon" @click="addPage()">
                <use xlink:href="#keowledge-a-zu4701"></use>
            </svg>
        </div>
  </el-drawer> 
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  onMounted,
  computed,
  getCurrentInstance,
  ComponentInternalInstance
} from 'vue' 
import { getMessagPage,messageAllRead } from '@/api/message'

import useSocketStore from '@/store/socket';
import { useHookI18n } from '@/hooks/i18n'
const { $t } = useHookI18n()
const scStore = useSocketStore()

const emit = defineEmits([""])
const {proxy} = getCurrentInstance() as ComponentInternalInstance
const props = defineProps({
    direction:{
        type:String,
        default:'rtl'
    },
    remove:Function,
    hasModal:{
        type:Boolean,
        default:true
    },
    modalTrans:{
        type:Boolean,
        default:true
    },
    width:{
        type:[Number,String],
        default:'22.5rem'
    },
    showClose:{
        type:Boolean,
        default:false
    },
    isHistory:{
        type:Boolean,
        default:false
    }
})
//const { } = toRefs(props);

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: "",
  })
);
const isHistoryMessage = ref(false)
const messageDrawer = ref(false)
const isHiddenDot = ref(false)
const messageLoading = ref(false)
const messagePage = reactive({
    current:1,
    size:20,
    total:0,
    backPage:1
})
const modal = computed(()=>{
    return props.hasModal
})
const getSize = computed(()=>{
    if(!isHistoryMessage.value){
        return props.width
    }else{
        // return '66.6875rem'
        return '800px'
    }
})
const getModalClass = computed(()=>{
    if(props.modalTrans){
        return 'modal-trans'
    }else{
        ''
    }
})
const insideList = ref<any>([])
onMounted(()=>{
    init()
    isHistoryMessage.value = props.isHistory
})


function init(){
    messageDrawer.value = true
    messageLoading.value = true
    getMessageAll()
}
function getMessageAll(){
    let obj = {
        current: isHistoryMessage.value?messagePage.current:1,
        size: messagePage.size,
        largeCategories: isHistoryMessage.value?null:'notice',
    }
    getMessagPage(obj).then(res=>{
        if(res.data.code == 0){
            messageLoading.value = false
            insideList.value = JSON.parse(JSON.stringify(res.data.data.records))
            messagePage.total = res.data.data.total
            insideList.value.forEach((item: { msgContent: string; isOpen: boolean; }) => {
                item.msgContent = JSON.parse(item.msgContent)
                item.isOpen = false
            })
        }
    })
}
function handleClose(){
    messageDrawer.value = false
}
function oepnMessage(item: { isOpen: boolean; }){
    item.isOpen = !item.isOpen
}
function closeMessage(item: { isOpen: boolean; }){
    item.isOpen = false
}
function toHistroy(){
    isHistoryMessage.value = true
    messageLoading.value = true
    getMessageAll()
}
function addPage(){
    messagePage.current += 1
    if(messagePage.current>Math.ceil(messagePage.total/messagePage.size)){
        messagePage.current = Math.ceil(messagePage.total/messagePage.size)
    }else{
        messageLoading.value = true
        getMessageAll()
    }
}
function cutPage(){
    messagePage.current -= 1
    if(messagePage.current<1){
        messagePage.current = 1
    }else{
        messageLoading.value = true
        getMessageAll()
    }
}
function numberBlur(){
    if(messagePage.current && messagePage.current!=messagePage.backPage){
        messageLoading.value = true
        getMessageAll()
    }
    if(!messagePage.current){
        messagePage.current = messagePage.backPage
    }else{
        messagePage.backPage = messagePage.current
    }
}
function backMessage(){
    isHistoryMessage.value = false
    messageLoading.value = true
    getMessageAll()
}
function readAllMessage(){
    messageAllRead().then(res => {
        if(res.data.code == 0){
            scStore.setMessageData({remainingCount:0})
            proxy.$notify({
                title: $t('message.message.allReadSuccess'),
                type: "success",
                position: "bottom-right",
            })
        }
    })
}
</script>
<style lang="scss">
.custom-message-drawer{
    .el-drawer__header{
        padding: 1.5rem 1.5rem 0rem;
        margin-bottom: 1rem;
        .drawer-title{
            font-size: 1.25rem;
            color: #363b4c;
            @include SourceHanSansCN-Bold;
            display: flex;
            align-items: center;
            .back{
                width: 20px;
                height: 20px;
                margin-right: 8px;
                cursor: pointer;
            }
            span{
                @include SourceHanSansCN-Bold;
            }
        } 
        .drawer-close{
            width: 1rem;
            height: 1rem;
            cursor: pointer;
        }
    }
    .el-drawer__body{
        padding: 0rem;
        .message-header-box{
            padding: .5rem 1.5rem;
            display: flex;
            justify-content: space-between;
            .left{
                .notice{
                    font-size: 1.25rem;
                    @include SourceHanSansCN-Bold;
                    font-size: #363b4c;
                }
            }
            .right{
                display: flex;
                align-items: center;
                >span{
                    display: flex;
                    align-items: center;
                }
                .line{
                    width: .0625rem;
                    height: .75rem;
                    background: #EEEFF0;
                    margin: 0rem .5rem;
                }
                .history-icon{
                    height: 1rem;
                    width: 1rem;
                    cursor: pointer;
                }
            }
        }
        .message-body{
            margin-top: .5rem;
            height: calc(100% - 3.5rem);
            .message-item{
                padding: 0rem 1.5rem;
                .create-time{
                    font-size: .75rem;
                    color: #6f7588;
                    @include SourceHanSansCN-Regular;
                }
                .message-item-body{
                    display: flex;
                    padding: 8px 12px;
                    background: #F5F6F7;
                    border-radius: 6px;
                    margin-top: 6px;
                    transition:  all 0.5s;
                    .icon-box{
                        width: 16px;
                        height: 16px;
                        margin-top: 2px;
                        .message-cion{
                            width: 16px;
                            height: 16px;
                        }
                    }
                    .message-item-content{
                        margin-left: 8px;
                        position: relative;
                        width: calc(100% - 24px);
                        .cell-message{
                            position: absolute;
                            right: 0px;
                            top: 0px;
                            font-size: 12px;
                            color: #363B4C;
                            @include SourceHanSansCN-Regular;
                            cursor: pointer;
                            .icon{
                                width: 12px;
                                height: 12px;
                            }
                        }
                        .message-title{
                            user-select: none;
                            width: calc(100% - 46px);
                            font-size: 14px;
                            color: #363b4c;
                            cursor: pointer;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            span{
                                @include SourceHanSansCN-Bold;
                            }
                        }
                        .message-content{
                            font-size: 12px;
                            color: #575e73;
                            @include SourceHanSansCN-Regular;
                        }
                        .cell{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            line-clamp: 1;
                        }
                    }
                }
            }
            .message-item+.message-item{
                margin-top: 1rem;
            }
        }
        .page{
            display: flex;
            align-items: center;
            justify-content: end;
            font-size: 14px;
            @include SourceHanSansCN-Regular;
            color: #575e73;
            height: 20px;
            padding: 0px 24px;
            margin-top: 10px;
            .icon{
                width: 18px;
                min-width: 18px;
                height: 18px;
                cursor: pointer;
            }
            .el-input-number{
                width: 32px;
                height: 20px;
                .el-input-number__decrease,.el-input-number__increase{
                    display: none;
                }
                .el-input__wrapper{
                    background-color: #F5F6F7 !important;
                    box-shadow: none !important;
                    padding: 0px 4px !important;
                    box-sizing: border-box !important;
                }
            }
            .split{
                padding: 0px 8px 3px;
            }
        }
    }
}
</style>